<template>
  <el-menu
    :default-active="activeIndex"
    :router="true"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
    <el-menu-item index="/">
      <router-link :to="{name:'home'}">首页</router-link>
    </el-menu-item>
    <el-menu-item index="/write">
      <router-link :to="{name:'write'}">
        <i class="el-icon-edit"></i>写博文
      </router-link>
    </el-menu-item>
    <el-menu-item index="/f5">
      <a href="https://naturefw.gitee.io/vue3-blog/?v=2"> 现在演示的刷新(别按F5) </a>
    </el-menu-item>
    <el-menu-item index="/readme">
      数据存放在前端存储的 webSQL，所以其他人是看不到的。
    </el-menu-item>
  </el-menu>
  <router-view/>
</template>

<script setup>
import { inject } from 'vue'
import { useRouter } from 'vue-router'

// 在线演示，默认跳到首页。
const router = useRouter()
// router.push({ name: 'home'})
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
  color: #2c3e50;
}
#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>